﻿<template>
  <a-drawer
    :title="title"
    width="90%"
    :visible="visible"
    @close="
      () => {
        this.visible = false
      }
    "
  >
    <a-form-model ref="form" :model="entity" :rules="rules" v-bind="layout">
      <a-row>
        <a-col :span="8">
          <a-form-model-item label="客户编码" prop="cCusCode">
            <a-input disabled v-model="entity.cCusCode" autocomplete="off" placeholder="客户编码" />
          </a-form-model-item>
        </a-col>

        <!-- <a-col :span="8">
          <a-form-model-item label="收发标志" prop="bRdFlag">
            <a-input v-model="entity.bRdFlag" autocomplete="off" placeholder="收发标志" />
          </a-form-model-item>
        </a-col> -->

        <a-col :span="8">
          <a-form-model-item label="单据类型" prop="cSource">
            <a-input disabled v-model="entity.cSource" autocomplete="off" placeholder="单据类型" />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="业务类型" prop="cBusType">
            <a-input disabled v-model="entity.cBusType" autocomplete="off" placeholder="业务类型" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <!-- <a-col :span="8">
          <a-form-model-item label="零售来源类型" prop="cSource">
            <a-input v-model="entity.cSource" autocomplete="off" placeholder="零售来源类型" />
          </a-form-model-item>
        </a-col> -->

        <a-col :span="8">
          <a-form-model-item label="对应业务单号" prop="cBusCode">
            <a-input disabled v-model="entity.cBusCode" autocomplete="off" placeholder="对应业务单号" />
          </a-form-model-item>
        </a-col>
        <!-- <a-col :span="8">
          <a-form-model-item label="仓库编码" prop="cWhCode">
            <a-input v-model="entity.cWhCode" autocomplete="off" placeholder="仓库编码" />
          </a-form-model-item>
        </a-col> -->
        <a-col :span="8">
          <a-form-model-item label="制单人" prop="cMaker">
            <a-input disabled v-model="entity.cMaker" autocomplete="off" placeholder="制单人" />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="收发单据号" prop="cCode">
            <a-input disabled v-model="entity.cCode" autocomplete="off" placeholder="收发单据号" />
          </a-form-model-item>
        </a-col>
      </a-row>

      <a-row>
        <a-col :span="8">
          <a-form-model-item label="收货地址" prop="cShipAddress">
            <a-input disabled v-model="entity.cShipAddress" autocomplete="off" placeholder="收货地址" />
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
    <a-table
      ref="table"
      :scroll="{ y: 530 }"
      :columns="columns"
      :rowKey="(row, index) => index"
      :dataSource="data"
      :pagination="false"
      :loading="loading"
      :rowClassName="rowClassName"
      @change="handleTableChange"
      :bordered="true"
      size="small"
    >
      <!-- :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" -->
      <span slot="CreateTime" slot-scope="CreateTime">{{ timeFormat(CreateTime) }}</span>
      <span slot="action" slot-scope="text, record">
        <template>
          <a @click="handleEdit(record)">编辑</a>
          <a-divider v-if="hasPerm('SO_SOMain.Edit') && hasPerm('SO_SOMain.Delete')" type="vertical" />
          <a v-if="hasPerm('SO_SOMain.Delete')" @click="handleDelete([record.Id])">删除</a>
        </template>
      </span>
    </a-table>
    <div
      :style="{
        position: 'absolute',
        right: 0,
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e9e9e9',
        padding: '4px 16px',
        background: '#fff',
        textAlign: 'right',
        zIndex: 1
      }"
    >
      <a-button @click="close">取消</a-button>&nbsp;
    </div>
  </a-drawer>
</template>

<script>
const toThousands = function(data) {
  if (data != null) {
    return data.toFixed(2).replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,')
  } else {
  }
}
const columns = [
  { title: '产品编码', dataIndex: 'cInvCode' },
  { title: '产品名称', dataIndex: 'cInvName' },

  // { title: '辅计量数量', dataIndex: 'iNum' },
  { title: '批号', dataIndex: 'cBatch' },
  { title: '数量', dataIndex: 'iQuantity', align: 'right' },
  {
    title: '含税单价(元)',
    dataIndex: 'iUnitCost',
    align: 'right',
    customRender: toThousands
  },
  {
    title: '金额(元)',
    dataIndex: 'iPrice',
    align: 'right',
    customRender: toThousands
  }
]

export default {
  props: {
    parentObj: Object
  },
  data() {
    return {
      data: [],
      selectedRowKeys: [],
      columns,
      pagination: {
        current: 1,
        pageSize: 25,
        showTotal: (total, range) => `总数:${total} 当前:${range[0]}-${range[1]}`,
        pageSizeOptions: ['25', '50', '100'], // 设置pageSize的可选值，页面可以通过下拉框进行选择
        showSizeChanger: true
      },
      filters: {},
      sorter: { field: 'ID', order: 'desc' },
      layout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 18 }
      },
      visible: false,
      loading: false,
      entity: {},
      rules: {},
      title: ''
    }
  },
  methods: {
    rowClassName(record, index) {
      if (record.cInvCode == '合计') {
        return 'heji'
      }
    },
    close() {
      this.visible = false

      this.entity = {}
    },
    handleTableChange(pagination, filters, sorter) {
      this.pagination = { ...pagination }
      this.filters = { ...filters }
      
      this.getDataList()
    },
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    init() {
      this.visible = true
      this.entity = {}
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
    },
    openForm(id, title) {
      this.init()
      this.title = title
      if (id) {
        this.loading = true
        this.$http.post('/OrderManagement/rdrecord32/GetTheData', { id: id }).then(resJson => {
          this.loading = false

          this.entity = resJson.Data
        })
        this.$http
          .post('/OrderManagement/rdrecords32/GetDataList', {
            PageIndex: this.pagination.current,
            PageRows: 999,
            SortField: this.sorter.field || 'ID',
            SortType: this.sorter.order,
            Search: { Condition: 'ID', Keyword: id },
            ...this.filters
          })
          .then(resJson => {
            this.loading = false
            this.data = resJson.Data

            var iPrice = 0
            resJson.Data.forEach(item => {
              iPrice = item.iPrice + iPrice
            })
            const row = {
              iPrice,

              cInvCode: '合计'
            }
            this.data.push(row)
            if (this.data) {
              const pagination = { ...this.pagination }
              pagination.total = resJson.Total
              this.pagination = pagination
            }
          })
      }
    },
    handleSubmit() {
      this.$refs['form'].validate(valid => {
        if (!valid) {
          return
        }
        this.loading = true
        this.$http.post('/OrderManagement/rdrecord32/SaveData', this.entity).then(resJson => {
          this.loading = false

          if (resJson.Success) {
            this.$message.success('操作成功!')
            this.visible = false

            this.parentObj.getDataList()
          } else {
            this.$message.error(resJson.Msg)
          }
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.heji {
  position: sticky;
  bottom: 0;
  background: #fff;
  font-size: 19px;
  font-weight: bold;
}
</style>
